<template>
	<view>
		<view class="wrap" v-if="nameList.length != 0">
			<view class="contentWrap" style="margin: 30rpx; display: flex; justify-content: space-between;"
				v-for="(item, index) in nameList" :key="index">
				<view class="nameWrap">
					<view class="nameInfo">
						<view class="father" :style="{justifyContent: nameType == '0' ? 'space-around':'space-between'}">
							<view class="pinyin sameWidth" style="margin-bottom: 10rpx;"
								v-for="(pinyinVls,pinyinIdx) in item.pinYin">{{pinyinVls}}</view>
						</view>
						<view class="father" :style="{justifyContent: nameType == '0' ? 'space-around':'space-between'}">
							<view class="name sameWidth" v-for="(nameVls,nameIdx) in item.name">{{nameVls}}</view>
						</view>
					</view>
				</view>
				<view class="countWrap">
					<view class="count">
						<text style="font-size: 16px;">{{item.stroke}}</text>
						<text style="font-size: 12px">画</text>
					</view>
					<view class="countText">
						笔画
					</view>
					<view class="showBtn" @tap="changeUrl(item.name)">
						查看解析
					</view>
				</view>
			</view>
		</view>
		<view class="noMoreWrap" v-if="show">
			<image class="noMoreImg" src="../../../static/noMore.svg" mode="aspectFill" lazy-load="false" @error="" @load=""></image>
			<view class="fontInfo">起名失败...</view>
		</view>
	</view>

</template>
<script>
	import {
		getNameListAPI
	} from '../../../utils/api'
	export default {
		data() {
			return {
				show:false,
				current: -1,
				pageNo: 1,
				nameList: [],
				familyName: '',
				nameType: '',
				sex: '',
				content:'',
				loadname:''
			}
		},
		async onLoad(options) {
			console.log('option==========>', options)
			this.loadname = options.font
			
			const {
				familyName,
				nameType,
				sex
			} = options;
			this.familyName = familyName;
			this.nameType = nameType;
			this.sex = sex;
			this.getList();
		},
		methods: {
			// 获取列表
			async getList() {
				uni.showLoading({
					title: this.loadname ,
					success:async () => {
						const params = {
							lastName: this.familyName,
							nameType: this.nameType,
							sex: this.sex,
							pageNo: this.pageNo,
						}
						const res = await getNameListAPI(params);
						if(res.code == 200){
							uni.hideLoading();
						}
						if(res.result.records.length == 0)
						{
							this.show = true
							console.log("SHOW",this.show)
						}else
						{
							const arr = res?.result?.records?.map(item => {
								return {
									name: item.name.split(''),
									pinYin: item.pinYin.split(' '),
									stroke: item.stroke
								}
							
							})
							this.nameList = arr;
						}
					}
				});				
			},
			// 换一批
			changeName() {
				this.pageNo = this.pageNo + 1
				this.getList();
			},

			changeUrl(name) {
				const newName = name.join('')
				uni.navigateTo({
					url: `../../../subPackagesA/pages/nameDetails/nameDetails?name=${newName}`
				})
			}
		}
	};
</script>
<style lang='less' scoped>
	.countWrap {
		width: 200rpx;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;

		.count {
			color: #FF7F22;
		}

		.countText {
			width: 48rpx;
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 28rpx;
		}

		.showBtn {
			width: 176rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			color: #fff;
			background: #FF7F22;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			font-size: 14px;
		}
	}

	.nameWrap {
		.pinyin {
			text-align: center;
			color: #BFBFBF;
			font-size: 12px;
			writing-mode: horizontal-tb;
		}

		.nameInfo {
			margin-right: 20rpx;
			width: 360rpx;
		}

		.father {
			width: 360rpx;
			display: flex;
			justify-content: space-between;
		}

		.sameWidth {
			width: 100rpx !important;
		}

		.name {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100rpx;
			height: 100rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid #F0F0F0;
		}
	}

	.change {
		display: flex;
		justify-content: flex-end;
		margin-right: 30rpx;

	}

	.wrap {
		height: 100%;
		padding: 30rpx 0;
		background-color: #F5F5F7;
		background-size: cover;
	}

	.noMoreWrap{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.noMoreImg{
		width: 400rpx;
		height: 400rpx;
	}
	.fontInfo{
		font-size: 28rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #737B80;
		line-height: 40rpx;
	}
}

</style>